<template>
	<div class="cover-file">
		<label class="cover-name el-form-item__label" for="">{{coverName}}</label>
		<div class="file-bgi">
			<img class="coverImg" v-bind:src="fileImg" alt="" >
			<input type="file" title=" " class="img-upload" @change="uploadToQiniu" accept="image/gif,image/jpeg,image/jpg,image/png" ref="file">
		</div>
		<p class="cover-txt">封面尺寸比例为3:2，建议上传尺寸720:480</p>
	</div>
</template>



<script>
export default {
    data() {
        return {
            coverName: this.covername,
            fileImg: '',
            imgFile: ''
        }
    },
    props: ['covername', 'init'],
    created() {},
    updated() {
        
    },
    methods: {
        uploadToQiniu() {
            // var fileImgUrl = '/lifetime/video/get_token'
            // this.$http.get(fileImgUrl).then((data) =>{
            // 	var token = data.body.data;
            let file = this.$refs.file.files[0]
            this.imgFile = this.$refs.file.files[0]
            var fd = new FormData()
            fd.append('file', file)
            var Url = this.utils.UP_IMAGE
            if (file) {
                this.utils.$post(Url, data => {
                    if (data) {
                        this.fileImg = data.data
                        this.notify()
                    }
                },fd)
            }
        },
        // 发送图片
        notify() {
            this.$emit('setImageUrl', this.fileImg, this.imgFile)
        }
    },
    watch: {
        init(newVal) {
            this.fileImg = newVal
        }
    }
}
</script>



<style lang="less" scoped>
.cover-file {
    width: 100%;
    height: 200px;
    padding: 20px 0;
    position: relative;
}
.cover-name {
    display: inline-block;
    width: 88px;
    text-align: right;
    padding-right: 14px;
    font-size: 14px;
}
.file-bgi {
    position: absolute;
    width: 204px;
    height: 135px;
    left: 100px;
    top: 20px;
    background: url('../../assets/添加封面.png') no-repeat center;
}
.img-upload {
    width: 100%;
    height: 100%;
    opacity: 0;
}
.coverImg {
    position: absolute;
    border: none;
    top: 0px;
    width: 100%;
    height: 100%;
}
.cover-txt {
    color: #ccc;
    margin-top: 150px;
    margin-left: 100px;
    font-size: 14px;
}
</style>
